// 按需引入所有用到的vant组件
import {
  Button, NavBar, CellGroup, Cell,
  Image, Dialog, Popup, Form, Field,
  Tabs, Tabbar, TabbarItem, Tab,
  PullRefresh, List, Divider, Tag,
  DatetimePicker, Icon, Search, Lazyload
} from 'vant'

// 3. 编写插件的核心逻辑
import { useIntersectionObserver } from '@vueuse/core'

const vantComponentList = [
  Button, NavBar, CellGroup, Cell, Image,
  Dialog, Popup, Form, Field, Tabs, Tabbar,
  TabbarItem, Tab, PullRefresh, List, Divider,
  Tag, DatetimePicker, Icon, Search, Lazyload
]
export const vantPlugin = {
  install (Vue) {
    vantComponentList.forEach(component => {
      Vue.use(component)
    })
  }
}
// 图片懒加载插件
export const directivePlugin = {
  install (Vue) {
    console.log('指令的插件注册了', Vue)
    // 实现一个空的指令
    Vue.directive('lazy', {
      // 这个函数会在指令绑定到的那个元素完成挂载之后自动执行
      inserted (el, binding) {
        // el: 指令绑定的到那个dom元素  img - 将来作为监控是否进入视口的对象
        // binding.value: 指令等于号后面的那个表达式的数据 url - img.src = url
        // 编写核心逻辑: 监控el[img]是否进入到了视口区域 如果进来了 给el.src=url 正式发送网络请求
        // 1. 如何监控进入视口？ vueUse
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }]) => {
            console.log(isIntersecting)
            // 这个地方的监听不会随着你赋值完毕就停止 而是会重复监听 只有监听的
            // 元素进入出去视口 总会不断地执行 性能浪费
            if (isIntersecting) {
              // 证明已经进来了
              el.src = binding.value
              // 停止监听
              stop()
            }
          }
        )
      }
    })
  }
}
